<!--
 * @Author: lzz
 * @Date: 2024-06-09 13:15:19
 * @LastEditTime: 2024-07-17 16:08:48
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>课程首页</title>
  </head>
  <body>
    <div class="container">
      <div class="selector-wrapper">
        <div class="selector">
          <div class="selector-item">
            <span class="selector-item-title">就业方向：</span>
            <span class="selector-item-txt active">全部</span>
            <span class="selector-item-txt">Vue</span>
            <span class="selector-item-txt">React</span>
            <span class="selector-item-txt">Nest</span>
          </div>
          <div class="selector-item">
            <span class="selector-item-title">课程等级</span>
            <span class="selector-item-txt active">全部</span>
            <span class="selector-item-txt">零基础</span>
            <span class="selector-item-txt">入门</span>
            <span class="selector-item-txt">实战</span>
          </div>
        </div>
      </div>
      <div class="lesson-wrapper">
        <div class="lesson">
          <div class="lesson-top">
            <span class="lesson-top-title">全部课程</span>
            <span class="lesson-top-result">共找到<em>15</em>个结果</span>
          </div>
          <div class="lesson-sort">
            <span class="active">综合</span>
            <span>好评</span>
            <span>人气</span>
          </div>
          <div class="lesson-list">
            <div class="lesson-item">
              <div class="imger"></div>
              <div class="content">
                <div class="content-title">2023 JavaScript零基础入学宝典</div>
                <div class="content-tag">
                  <span>好评率99%</span>
                  <span>直播视频</span>
                  <span>顶级教师</span>
                </div>
                <div class="content-price">
                  <span>免费</span>
                  <span>4万人报名</span>
                </div>
              </div>
            </div>
            <div class="lesson-item">
              <div class="imger"></div>
              <div class="content">
                <div class="content-title">
                  2023 JavaScript零基础入学宝典
                </div>
                <div class="content-tag">
                  <span>好评率99%</span>
                  <span>直播视频</span>
                  <span>顶级教师</span>
                </div>
                <div class="content-price">
                  <span>免费</span>
                  <span>4万人报名</span>
                </div>
              </div>
            </div>
            <div class="lesson-item">
              <div class="imger"></div>
              <div class="content">
                <div class="content-title">
                  2023 JavaScript零基础入学宝典3333333333333333
                </div>
                <div class="content-tag">
                  <span>好评率99%</span>
                  <span>直播视频</span>
                  <span>顶级教师</span>
                </div>
                <div class="content-price">
                  <span>免费</span>
                  <span>4万人报名</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="page">
        <span>
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M14.364 20.435a1 1 0 0 1-1.414 0L8 15.485A4 4 0 0 1 8 9.83l4.95-4.95a1 1 0 1 1 1.414 1.414l-4.95 4.95a2 2 0 0 0 0 2.828l4.95 4.95a1 1 0 0 1 0 1.414Z"
              fill="currentColor"
            ></path>
          </svg>
        </span>
        <span class="page-item active">1</span>
        <span class="page-item">2</span>
        <span class="page-item">3</span>
        <span class="page-item">4</span>
        <span><svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.636 20.435a1 1 0 0 0 1.414 0l4.95-4.95a4 4 0 0 0 0-5.656l-4.95-4.95a1 1 0 0 0-1.414 1.414l4.95 4.95a2 2 0 0 1 0 2.828l-4.95 4.95a1 1 0 0 0 0 1.414Z" fill="currentColor"></path></svg></span>
      </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
      $(".selector-item-txt").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
      $(".lesson-sort span").click(function () {
        $(this).addClass("active").siblings().removeClass("active");
      });
      $(".page-item").click(function(){
        $(this).addClass("active").siblings().removeClass("active");
      })
    </script>
  </body>
</html>
